<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=11" />
  <title>Hello World!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <!--    <meta-->
  <!--      http-equiv="Content-Security-Policy"-->
  <!--      content="default-src 'self'; script-src 'self'"-->
  <!--    />-->
  <!--    <meta-->
  <!--      http-equiv="X-Content-Security-Policy"-->
  <!--      content="default-src 'self'; script-src 'self'"-->
  <!--    />-->
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/css/index.css">

  <script>window.$ = window.jQuery = require('../assets/js/jquery-3.5.1.slim.min.js');</script>
  <script src="../assets/js/bootstrap.min.js"></script>
  <script src="../assets/js/popper.min.js"></script>
</head>
<body>
<button type="button" class="close" aria-label="Close" id="exit-app">
  <span aria-hidden="true">&times;</span>
</button>
<div id="memory">
  <h4>Memory</h4>
  <div class="memory-content">
    <div><span class="title">Total     </span><span class="value" id="mem-total"></span></div>
    <div><span class="title">Available </span><span class="value" id="mem-available"></span></div>
    <div><span class="title">Free      </span><span class="value" id="mem-free"></span></div>
  </div>
  <h4>Swap</h4>
  <div class="memory-content">
    <div><span class="title">Total     </span><span class="value" id="swap-total"></span></div>
    <div><span class="title">Free      </span><span class="value" id="swap-free"></span></div>
    <div><span class="title">Used      </span><span class="value" id="swap-used"></span></div>
  </div>
  <div id="swap-container">

  </div>
  <h4>Disk</h4>
  <div id="disk">

  </div>
</div>
<div>
  <h4>CPU</h4>
  <div id="cpu"></div>
</div>
<div>
  <h4>Processes</h4>
  <div class="container">
    <div class="row">
      <div class="col-sm">PID</div><div class="col-sm">Name</div><div class="col-sm">CPU</div><div class="col-sm">Mem</div>
    </div>
    <div id="processes"></div>
  </div>
</div>
<div id="host">
  <h4>Host</h4>
  <p>UP Time: <span id="host-uptime"></span></p>
</div>
<div>
  <h4>Programming Env</h4>
  <div id="languages"></div>
</div>
<div>
  <h4>Clean Size</h4>
  <div id="sizes"></div>
</div>

<p id="host-version"></p>
<script>
  require('../dist/render/renderer.js')
</script>
</body>
</html>
